<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>excel下样品单-OMS订单管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <style>
        .a-input {
            height: 36px;
            line-height: 36px;
            margin-bottom: 20px;
        }

        .a-input span {
            display: inline-block;
            width: 100px;
            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }

        .a-input input {
            border: 1px solid #dcdcdc;
            height: 22px;
            line-height: 22px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }
        .a-input form {
            border: 1px solid #dcdcdc;
            height: 22px;
            line-height: 22px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            border: 1px solid #dcdcdc;
            height: 36px;
            line-height: 36px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            width: 260px;
        }

        .textarea-box{
            display: flex;

            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }
        .textarea-box span{
            width: 100px;
            margin-right: 20px;
        }
        .textarea-box textarea{
            border:1px solid #ccc;
            border-radius: 8px;
            padding: 5px;
        }
        .content-title {
            font-weight: bold;
            padding: 20px 40px;
            font-size: 16px;
        }
        .bussiness-table{
            width: 95%;
            margin: 0 auto;
        }
        .bussiness-table input{
            border: none;
            min-width:300px ;
            height: 36px;
            padding: 0 15px;
        }
        .bussiness-total-box{
            margin-left: 40px;
            margin-top: 30px;
        }
        .total-number{
            color: red;
            font-weight: bold;
            font-size: 16px;
        }
        .order-save{
            margin: 30px 150px
        }

    </style>
    <div class="sp-wrapper">
        <div class="order-body">
            <div class="content-title">&nbsp;</div>
            <form action="/zbj/excel_sample_import" method="post" class="layui-form" id="sp-form">
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">直播间</label>
                    <div class="layui-input-block">
                        <select name="buyerUserId" id="buyerUserId" lay-search="">
                            <option value="">请选择直播间</option>
                            <option th:each="item:${clientList}" th:value="${item.id}" th:text="${item.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="textarea-box"><span>订单备注</span>
                    <textarea name="sellerMemo" id="mark" cols="80" rows="5"></textarea>
                </div>

                <div enctype="multipart/form-data" id="execl_form" class="a-input">
                    <span>导入商品</span>
                    <input type="file" name="excel" id="excel" placeholder="" />
                    <a href="javascript:;" id="excel_upload_btn" class="layui-btn layui-btn-primary layui-btn-sm">导入商品</a>
                    <span id="excel_upload_btn_" style="display: none;" class="update"><i></i>导入中</span>
                </div>


                <div  class="bussiness-table">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="sp-data">
                            <tr>
                                <td>
                                    <input type="text" class="goods" name="specNumber" autocomplete="off" readonly/>
                                </td>
                                <td>
                                    <input type="text" name="quantity" class="quantity" readonly/>
                                </td>
                                <td>
                                    <i class="delete">-</i><i class="add">+</i>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </form>
        </div>
        <div class="clear"></div>
        <button type="button" id="save" class="layui-btn order-save">提交订单</button>
    </div>

    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript" src="/address/Address.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#excel_upload_btn").click(function () {
                var excel = $("#excel").val();
                if (excel == '') {
                    alert("请选择文件");
                    return false;
                } else if (excel.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                    alert("只能上传Excel文件");
                } else if (excel.lastIndexOf(".xlsx") < 0) {
                    alert("只能上传Excel文件");
                } else {
                    var url = "/zbj/excel_sample_import_ajax";
                    // var formData = new FormData($('#execl_form')[0]);

                    var formData = new FormData();
                    formData.append("excel", document.getElementById("excel").files[0]);
                    $(this).hide();
                    $("#excel_upload_btn_").show();
                    $.ajax({
                        url: url,
                        type: "post",
                        data: formData,
                        success: function (result) {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            console.log(result);
                            if (result.code == 0) {
                                $("#sp-data").html("");

                                for(var i=0;i<result.data.length;i++){
                                    var d = result.data[i];
                                    var ht = '<tr><td><input type="text" class="goods" name="specNumber" value="'+d.code+'" autocomplete="off" readonly/></td>\n' +
                                        '<td><input type="text" name="quantity" value="'+d.count+'"class="quantity" readonly/></td>\n' +
                                        '<td><i class="delete">-</i></td>\n' +
                                        '</tr>';
                                    $("#sp-data").append(ht);
                                }

                                //alert("导入成功");
                            } else {
                                alert("更新失败:" + result.msg);
                            }
                            // alert(JSON.stringify(result));
                            return false;
                        },
                        error: function () {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            alert("excel上传失败");
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }

                return false;
            })



            // 删除
            $('#sp-data').delegate('.delete', 'click', function () {
                $(this).parent('td').parent('tr').remove();
            });
            // 保存
            $('#save').click(function () {
                // 获取页面已有的一个form表单
                // var form = document.getElementById("sp-form");
                // 用表单来初始化
                var formData = $('#sp-form').serialize();
                //检查商品规格
                var returnResult = true;
                var goodsCount = 0;
                //规格颜色
                $("input[name^='specNumber']").each(function (i, el) {
                    if ($(this).val() != "") {
                        //有商品
                        goodsCount++;
                        //检查该行数据
                        var quantity = $($("input[name^='quantity']")[goodsCount - 1]).val();
                        if (quantity == '' || quantity == '0' || isNaN(quantity)) {
                            alert("请输入数量");
                            returnResult = false;
                            return false;
                        }
                    }
                });
                if (returnResult == false) return false;
                if (goodsCount == 0) {
                    alert("未选择商品");
                    return false;
                }

                var sellerMemo= $("#mark").val();
                var buyerUserId = $("#buyerUserId  option:selected").val();



                if(isnull(buyerUserId)){
                    alert("请选择直播间");
                    return false;
                }

                $('#sp-form').submit();
            });
            function isnull(val) {
                if (val == '' || val == undefined || val == null || val.length <= 0) return true;
                return false;
            }
        });
    </script>
    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'form'], function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#form_date' //指定元素
            });
        });
    </script>
      </div>
    </div>
</div>
</body>
<html>
